css导航子菜单未显示右侧_Css_Less

css导航子菜单未显示右侧

css less

css导航子菜单未显示右侧,css,less,Css,Less,您好，我有下面的实时示例，您可以在其中看到一个正在运行的导航，如果您签出文档，您将看到子菜单工作不正常。有人能帮我修一下吗？似乎我看不到解决方案，即使它在我眼前 HTML <header role="banner"> <div class="navbar fixed-top navbar-theme-aizio-background"> <div class="inner-navbar"> <a href="#" class="b

您好，我有下面的实时示例，您可以在其中看到一个正在运行的导航，如果您签出文档，您将看到子菜单工作不正常。有人能帮我修一下吗？似乎我看不到解决方案，即使它在我眼前

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。您还有更多要重命名的内容

<!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>


指数
#菜单，#菜单ul{
填充：0；
保证金：0；
列表样式：无；
}
#菜单里{
显示：内联块；
宽度：150px；
文本对齐：居中；
背景：#999；
}
#菜单ul{
位置：绝对位置；
左：-999em；
}
#菜单li：悬停ul{
左：自动；
}
#菜单a{
显示：块；
}

我有相同的菜单，它可以工作。我给你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>


指数
#菜单，#菜单ul{
填充：0；
保证金：0；
列表样式：无；
}
#菜单里{
显示：内联块；
宽度：150px；
文本对齐：居中；
背景：#999；
}
#菜单ul{
位置：绝对位置；
左：-999em；
}
#菜单li：悬停ul{
左：自动；
}
#菜单a{
显示：块；
}

您有一些问题，因为水平菜单的样式会影响垂直菜单，我在您的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;
}

查看演示

您有一些问题，因为水平菜单的样式影响垂直菜单，我在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;
}

查看演示

您需要什么？你有关于什么尺寸不起作用的问题吗？是图标和文本对齐还是背景对齐？字体图标和文本没有对齐？您想要水平对齐还是并排对齐？子菜单我想要垂直对齐（已经对齐）。如果您查看JSFIDLE，您将看到子菜单中的文本（包括图标）非常混乱。文本没有垂直对齐，图标似乎在正确的位置也许我应该给它们添加一些填充物不？你需要什么？你有关于什么尺寸不起作用的问题吗？是图标和文本对齐还是背景对齐？字体图标和文本没有对齐？您想要水平对齐还是并排对齐？子菜单我想要垂直对齐（已经对齐）。如果您查看JSFIDLE，您将看到子菜单中的文本（包括图标）非常混乱。文本没有垂直对齐，图标似乎在正确的位置，也许我应该给它们添加一些填充物否？当我回到家时，我会准备更多的代码并查看更改。。你做了。。。糟糕的一周还没有结束，到目前为止，我似乎忘记了正确地指出类，并在回家后将一些类设置为“全局”，我将进一步准备代码并查看更改。。你做了。。。糟糕的一周还没有结束，到目前为止，我似乎忘记了正确地指出课程，并将一些课程设置为“全球”