css - css导航子菜单未显示正确

Question

您好，我有以下实时示例http://jsfiddle.net/vfubN/4/如果您查看文档，您可以在其中看到正在运行的导航，您会发现子菜单无法正常工作。有人可以帮我解决它吗？似乎即使它在我的眼前，我也看不到解决方案。

HTML

<header role="banner">
    <div class="navbar fixed-top navbar-theme-aizio-background">
        <div class="inner-navbar"> <a href="#" class="brand pull-right">Test<sub>name</sub></a>
            <div class="container">
                <nav id="menu" class="nav" role="navigation">
                    <ul class="inactive-responsive" id="inactive-responsive">
                        <li>
                            <a href="#" id="menutoggle" class="navtoggle" title=""><span><i aria-hidden="true"  class="icon-home"></i></span>Home</a>
                        </li>
                        <li class="inactive-dropdown" id="dropdownToggle"> <a href="#" title=""><span><i aria-hidden="true" class="icon-signal"></i></span>Docs</a>
                            <ul class="inactive-dropdown vertical-navigation" id="inactive-dropdown">
                                <li> <a href="#" title=""><span><i aria-hidden="true" class="icon-code"></i></span>ssss</a>
                                </li>
                                <li> <a href="#" title=""><span><i aria-hidden="true" class="icon-qrcode"></i></span>Portfolio</a>
                                </li>
                                <li> <a href="#" title=""><span><i aria-hidden="true" class="icon-print"></i></span>Blog</a> 
                                </li>
                                <li> <a href="#" title=""><span><i aria-hidden="true" class="icon-heart"></i></span>The  team</a>
                                </li>
                                <li><a href="#" title=""><span><i aria-hidden="true" class="icon-envelope"></span></i>google.ro</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#" title=""><span><i aria-hidden="true" class="icon-cog"></i></span>Portfolio</a>
                        </li>
                        <li><a href="#" title=""><span><i aria-hidden="true" class="icon-cloud"></i></span>Blog</a> 
                        </li>
                        <li><a href="#" title=""><span><i aria-hidden="true" class="icon-heart"></i></span>The  team</a>
                        </li>
                        <li><a href="#" title=""><span><i aria-hidden="true" class="icon-envelope"></span></i>Contact</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>

CSS

.navbar [class^="icon-"],
[class*=" icon-"] {
  display: block;
  font-size: 32px;
  font-size: 2rem;
  vertical-align: middle;
  background-repeat: no-repeat;
}
.navbar {
  background: #4d4d4d;
  width: 100%;
  -webkit-box-shadow: 0 0 0.9em #555555;
  box-shadow: 0 0 0.9em #555555;
}
.navbar-inner {
  width: 100%;
}
/*
Navbar Brand Styles
 */
.inner-navbar .brand {
  color: #ffffff;
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.5;
  padding-right: 24px;
  padding-right: 1.5rem;
  display: block;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}
.inner-navbar .brand sub,
sup {
  padding-left: 5px;
  padding-left: 0.3rem;
  font-size: 14px;
  font-size: 0.9rem;
}
.inner-navbar .brand:hover {
  color: #004b67 /*#383838 */;
  text-decoration: none;
}
.inner-navbar nav {
  display: block;
  font-size: 14px;
  font-size: 0.9rem;
  font-family: Arial, sans-serif;
  z-index: 1000;
}
.inner-navbar nav button#responsiveToggle {
  display: none;
}
.inner-navbar nav ul {
  padding: 0;
  margin: 0 auto;
  text-align: center;
}
.inner-navbar nav ul li {
  display: block;
  float: left;
  width: auto;
  min-width: 130px;
  min-width: 8.1rem;
}
.inner-navbar nav li:first-child a,
li:last-child a {
  border-left: 0;
}
.inner-navbar nav ul li a {
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
}
.inner-navbar nav a:hover {
  color: #004b67;
}
.inactive-dropdown {
  display: none;
}
.active-dropdown {
  position: absolute;
  background-color: #1f2024;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}
.active-dropdown li {
  float: left;
  clear: both;
  line-height: 1.5;
  vertical-align: middle;
  /* nice blue color background-color: #2aa4cf; */
}
.active-dropdown li a {
  display: block;
  width: auto;
  text-align: left;
  line-height: 1.5;
}
.vertical-navigation {
  float: none;
}
.vertical-navigation i {
  float: left;
  line-height: 1.5;
}
/*
Themes
 */
.navbar-theme-blue-marina {
  background: #2aa4cf;
}
.navbar-theme-aizio-background,
.active-dropdown li {
  background: #004b67;
}
.navbar-theme-aizio-background a {
  color: #fff;
}
.navbar-theme-aizio-background ul li a:hover {
  color: #b2e558;
}
.navbar-theme-aizio-background .brand:hover {
  color: #b2e558;
}
/*  ------------------------------  RESPONSIVE STYLES ----------------------------------------------------*/
/*Styles for screen 768px and lower*/
@media screen and (max-width: 768px) {
  .active-dropdown {
    position: relative;
    display: block;
  }
  .active-dropdown li a {
    text-align: center;
  }
  .inner-navbar nav li {
    width: 50%;
    float: left;
    position: relative;
    border-left: 0 solid #666;
  }
  .inner-navbar nav li a {
    border-left: 0;
    padding: 10px 0;
    background: #383838;
  }
  .inner-navbar nav li a:hover {
    background: #636363;
  }
  .inner-navbar nav a {
    text-align: center;
    width: 100%;
  }
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width: 480px) {
  .inner-navbar nav {
    border-bottom: 0;
  }
  .inner-navbar nav li {
    width: 100%;
    float: none;
    position: relative;
    border-left: 0 solid #666;
  }
  .inner-navbar nav li a {
    border-bottom: 1px solid #0c0a0d;
  }
  .inner-navbar nav button#responsiveToggle {
    display: block;
    width: 100%;
  }
  .inner-navbar nav button#responsiveToggle {
    zoom: 1;
  }
  .inner-navbar nav button#responsiveToggle:before {
    content: '';
    /* 1 */
    display: block;
    /* 2 */
  }
  .inner-navbar nav button#responsiveToggle:after {
    content: '';
    display: table;
    clear: both;
  }
  /* When JavaScript is enabled, we hide the menu */
  .js .inner-navbar nav .inactive-responsive {
    display: none;
  }
  /* Displaying the menu when the user has clicked on the button */
  .active-responsive a:hover {
    font-size: 2em;
    opacity: .5;
  }
  .active-responsive a:hover i {
    display: none;
  }
  .fixed-top {
    position: relative;
  }
}
/*Smartphone*/
@media only screen and (max-width: 320px) {
  .active-dropdown li {
    display: block;
    float: none;
    width: 100%;
  }
  .inner-navbar nav li {
    display: block;
    float: none;
    width: 100%;
  }
  .inner-navbar nav li a {
    border-bottom: 1px solid #0c0a0d;
  }
}
/* RETINA */
/*  ------------------------------  RESPONSIVE STYLES ----------------------------------------------------*/
/*Styles for screen 768px and lower*/
@media screen and (max-width: 768px) {
  .inner-navbar .brand {
    display: none;
  }
}
/*Styles for screen 515px and lower*/
/*Smartphone*/
@media only screen and (max-width: 320px) {
  .inner-navbar .brand {
    display: block;
  }
  .inner-navbar .pull-left {
    float: none;
  }
  .inner-navbar .pull-right {
    float: none;
  }
}
/* RETINA */

score 2 · Accepted Answer

您有一些问题，因为水平菜单的样式会影响垂直菜单，我在您的 CSS 中进行了以下更改：

.inner-navbar nav .vertical-navigation li a{
  text-align:left;
 }
.vertical-navigation i {
  float:none;
  line-height: 1.5;
}
.vertical-navigation li [class^="icon-"] {
  display: inline-block;
  padding: 0 10px;
}

查看演示http://jsfiddle.net/vfubN/13/

score 2 · Accepted Answer

我有相同的菜单，它的工作原理。我给你CSS。您还有更多要重命名的内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Index</title>
<style type="text/css">
#menu, #menu ul {
    padding:0;
    margin:0;
    list-style: none;
}
#menu li {
    display:inline-block;
    width:150px;
    text-align: center;
    background: #999;
}
#menu ul {
    position:absolute;
    left:-999em;
}
#menu li:hover ul {
    left:auto;
}
#menu a {
    display:block;
}
</style>
</head>
<body>
    <ul id="menu">
    <li id='accueil'><a href="index.php">accueil</a></li><!--
     --><li><a href="" class='catalogue'>CATALOGUE</a></li><!--
     --><li><a class='fonction' href="">FONCTIONNEMENT</a>
        <ul>
        <li><a href='toto'>toto</a></li><!--
         --><li><a href='toto'>tutu</a></li><!--
         --><li><a href='toto'>titi</a></li><!--
         --><li><a href='toto'>tata</a></li>
        </ul>
    </li><!--
     --><li><a class='service' href="">LES SERVICES</a></li><!--
     --><li><a class='commande' href="">COMMANDE</a></li><!--
     --><li><a class='contact' href="">CONTACT</a></li>
    </ul>
</body>
</html>

css - css导航子菜单未显示正确

2 回答 2

Related

Reference