1

我正在尝试使用列表制作具有固定定位和子菜单的导航栏。我无法让子菜单直接位于其父 UL 下方。它去了最左边。我需要在以下代码中添加什么？对不起，如果这太初学者...

<?php 
//Navigation Bar
echo '<div id="nav_main">';
echo '<ul>';
echo '<li><a href="' . $defaultURL . '">LOGO</a></li>';
echo '<li><a href="logout.php">Category</a></li>';
    if($login=='1'){
        echo '<li><a href="#">Home</a></li>';
        echo '<li><a href="#">Settings</a>'
        .'<ul>'
        .'<li><a href="logout.php">Log Out</a></li>'
        .'</ul>'
        .'</li>';
    }else{
        echo '<li><a id="register" href="signup.php">Join Today</a></li>';
        echo '<li><a href="login.php">Sign in</a></li>';            
    }
echo '</ul>';
echo '</div>';
//Navigation Bar
?>

CSS：

#nav_main ul {
    position:fixed;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    background-color: #88B541;
    box-shadow: 2px 2px 1px #888888;
    -moz-box-shadow: 2px 2px 1px #888888;
    -webkit-box-shadow: 2px 2px 1px #888888;
}   

#nav_main li {
    list-style-type: none;  
    display: inline;
    font-size: 15px;
    font-weight: bold;
    padding: 20px;
}

#nav_main a {
    color: #FFFFFF;
    text-decoration: none;
}

#nav_main a:hover {
    padding: 12px 8px;
    background: #52A423;
}

#nav_main ul ul {
    display: none;
    width: auto;
}

#nav_main ul li:hover > ul {
    margin: 45px;
    display: block;
    padding-left: 50px;
    padding-right: 50px;
}

#nav_main ul ul li {
    float: none; 
}

上次修改的 CSS：

ul.nav {
    position:fixed; margin: 0;  top: 0; left: 0; width: 100%;
    background-color: #88B541; box-shadow: 2px 2px 1px #888888;
    -moz-box-shadow: 2px 2px 1px #888888; -webkit-box-shadow: 2px 2px 1px #888888;
}

ul.nav li a {
    display: block; text-decoration: none; color: #FFFFFF; font-weight: bold; padding: 12px; font-size: 15px;
}

ul.nav > li {
    float: left; position: relative;
}

ul.nav li a:hover {
    background: #52A423;
}

ul.nav > li ul {
    display: none; position: absolute; left: -1px; width: 150px; background-color: #88B541; box-shadow: 2px 2px 1px #888888;
    -moz-box-shadow: 2px 2px 1px #888888; -webkit-box-shadow: 2px 2px 1px #888888;
}

ul.nav > li:hover ul { display: block; }
ul.nav > li ul li { display: block; }

子菜单左边有空格，我改了“display:inline-block;” 到“ul.nav > li”中的“float:left”，似乎没有用。我也意识到 IE10 中没有显示子菜单？我的css一定有问题...

4

1 回答 1

2

为什么不试试这个 HTML/CSS 结构呢？

HTML

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

小提琴： http:
//jsfiddle.net/vMuxA/（垂直菜单）
http://jsfiddle.net/vMuxA/1/（水平菜单）

于 2013-05-09T10:56:12.767 回答