doutuzhuohao6449 2017-12-06 04:15
浏览 337

下拉菜单 - 每个菜单中都有箭头

I have made a drop down menu from mysql database. Here problem is that arrow is present every where. I need only arrows attached with the children fields. I have added the image of drop down menu. I have also added css and php code to find out my problems. Thanks for your help in advance.

css code:

nav {    
      display: block;
      text-align: center;
    }
    nav ul {
      margin: 0;
      padding:0;
      list-style: none;
    }
    .nav a {
      display:block; 
      background: #111; 
      color: #fff; 
      text-decoration: none;
      padding: 0.8em 1.8em;
      text-transform: uppercase;
      font-size: 80%;
      letter-spacing: 2px;
      text-shadow: 0 -1px 0 #000;
      position: relative;
    }
    .nav{  
      vertical-align: top; 
      display: inline-block;
      box-shadow: 
        1px -1px -1px 1px #000, 
        -1px 1px -1px 1px #fff, 
        0 0 6px 3px #fff;
      border-radius:6px;
    }
    .nav li {
      position: relative;
    }
    .nav > li { 
      float: left; 
      border-bottom: 4px #aaa solid; 
      margin-right: 1px; 
    } 
    .nav > li > a { 
      margin-bottom: 1px;
      box-shadow: inset 0 2em .33em -0.5em #555; 
    }
    .nav > li:hover, 
    .nav > li:hover > a { 
      border-bottom-color: orange;
    }
    .nav li:hover > a { 
      color:orange; 
    }
    .nav > li:first-child { 
      border-radius: 4px 0 0 4px;
    } 
    .nav > li:first-child > a { 
      border-radius: 4px 0 0 0;
    }
    .nav > li:last-child { 
      border-radius: 0 0 4px 0; 
      margin-right: 0;
    } 
    .nav > li:last-child > a { 
      border-radius: 0 4px 0 0;
    }
    .nav li li a { 
      margin-top: 1px;
    }
    .nav li a:first-child:nth-last-child(2):before { 
      content: ""; 
      position: absolute; 
      height: 0; 
      width: 0; 
      border: 5px solid transparent; 
      top: 50% ;
      right:5px;  
     }
     /* submenu positioning*/
    .nav ul {
      position: absolute;
      white-space: nowrap;
      border-bottom: 5px solid  orange;
      z-index: 1;
      left: -99999em;
    }
    .nav > li:hover > ul {
      left: auto;
      margin-top: 5px;
      min-width: 100%;
    }
    .nav > li li:hover > ul { 
      left: 100%;
      margin-left: 1px;
      top: -1px;
    }
    /* arrow hover styling */
    .nav > li > a:first-child:nth-last-child(2):before { 
      border-top-color: #aaa; 
    }
    .nav > li:hover > a:first-child:nth-last-child(2):before {
      border: 5px solid transparent; 
      border-bottom-color: red; 
      margin-top:-5px
    }
    .nav li li > a:first-child:nth-last-child(2):before {  
      border-left-color: #aaa; 
      margin-top: -5px
    }
    .nav li li:hover > a:first-child:nth-last-child(2):before {
      border: 5px solid transparent; 
      border-right-color: orange;
      right: 10px; 
    }

Php code:

<?php
    $con=mysqli_connect("localhost","root","","nfs");
    // Check connection
    if (mysqli_connect_errno())
    {
      echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
    function get_menu_tree($parent) 
    {
        global $con;
        $menu = "";
        $sqlquery = " SELECT * FROM tbl_menu where parent='" .$parent . "' ";
        $res=mysqli_query($con,$sqlquery);
        while($row=mysqli_fetch_array($res,MYSQLI_ASSOC)) 
        {
               $menu .="<li><a href='#'>".$row['label']."</a>";
               $menu .= "<ul>".get_menu_tree($row['id'])."</ul>";
               $menu .= "</li>";
        }
        return $menu;
    } 
    ?>
    <h1>Create Nested menu Tree by Mysql php</h1>
    <nav>
    <ul class="nav">
    <?php echo get_menu_tree(0);//start from root menus having parent id 0 >
    </ul> 
    </nav>

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 slaris 系统断电后,重新开机后一直自动重启
    • ¥15 51寻迹小车定点寻迹
    • ¥15 谁能帮我看看这拒稿理由啥意思啊阿啊
    • ¥15 关于vue2中methods使用call修改this指向的问题
    • ¥15 idea自动补全键位冲突
    • ¥15 请教一下写代码,代码好难
    • ¥15 iis10中如何阻止别人网站重定向到我的网站
    • ¥15 滑块验证码移动速度不一致问题
    • ¥15 Utunbu中vscode下cern root工作台中写的程序root的头文件无法包含
    • ¥15 麒麟V10桌面版SP1如何配置bonding