Question

我在html + css上没有太多经验，但是你确实有谷歌这样，容易精益，但有时事情变得艰难。我正在尝试做我自己的投资组合，其中第一页只显示我的徽标和下拉菜单丝毫两种语言。它位于左下方，当鼠标显示时，我想要显示在右侧。

葡萄牙语
英文
语言

但我想要这样。

语言 - 英语 - 葡萄牙语

HTML：

<nav > 
<ul >
    <li><a href=""><img src="image/language.png" alt="English - UK" width="229" height="37" /></a>
         <ul>
            <li><a href="HTML.html"><img src="image/english.png" alt="English - UK" width="139" height="37" /></a></li>
            <li><a href="#"><img src="image/portugues.png" alt="Portugues - BR" width="139" height="37" /></a></li>             

        </ul>
     </li>
</ul>

的CSS：

   nav ul ul {
   display: none;
}


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

nav ul {
background-repeat: no-repeat;
background-position: center;
background-size: 300px 50px;        
    margin-left: -10px; 
padding: 10px;    
list-style: none;
position: relative;
display: inline-table; 
bottom: 100%;

}

nav ul:after {
    content: ""; clear: both; display: block;
}   

    nav ul li {
    float: left;

}

nav ul li:hover {


}

nav ul li:hover a {
/*color: #fff;*/
}

nav ul li a {
 padding: 0px;
}

nav ul ul {
background-repeat: no-repeat;
 background-size: 139px 37px;
position: absolute; left: 13%;
padding: 1px;   
}

nav ul ul li {
float: none;        
position: relative;     
}

nav ul ul li a {
padding: 15px 43px;
/*color: #fff;*/
}   

nav ul ul li a:hover {

}

nav ul ul ul {
position: absolute; left: 100%; top:50;
}

我非常感谢任何帮助

非常感谢

更新：这是一个打印屏幕，按照我的方式和我需要的方式！ http://i395.photobucket.com/albums/pp32/jh4ck/imagen1.jpg

Answer 1

将CSS更改为

ul ul li{display: inline-block}

或

ul ul li{display: inline}

Answer 2

我对你提供的代码唯一能做的就是修复HTML，这不是真的。

HTML：

<nav > 
<ul>
    <li><a href=""><img src="image/language.png" alt="English - UK" width="229" height="37" /></a>
        <ul>
            <li><a href="HTML.html"><img src="image/english.png" alt="English - UK" width="139" height="37" /></a></li>
            <li><a href="#"><img src="image/portugues.png" alt="Portugues - BR" width="139" height="37" /></a></li> 
        </ul>
    </li>
</ul>
</nav>

JSFiddle demo

我认为您的问题是整个网站的定位方式，而不仅仅是下拉菜单。

编辑：您刚刚将HTML更改为与我完全相同，我的错误原因是您在更新后看到它。

Answer 3

试试这个css

 nav ul ul {
   display: none;
}


 nav ul li:hover ul {
     display: inline;
}

nav ul {
background-repeat: no-repeat;
background-position: center;
background-size: 300px 50px;        
    margin-left: -10px; 
padding: 10px;    
list-style: none;
position: relative;
display: inline; 
bottom: 100%;

}

nav ul:after {
    content: "";
}   

    nav ul li {
    float: left;

}

nav ul li:hover {


}

nav ul li:hover a {
/*color: #fff;*/
}

nav ul li a {
 padding: 0px;
}

nav ul ul {
background-repeat: no-repeat;
 background-size: 139px 37px;

padding: 1px;   
}

nav ul ul li {
float: none;        
position: relative;   
    display:inline;
}

nav ul ul li a {
padding: 0 10px;
/*color: #fff;*/
}   

nav ul ul li a:hover {

}

nav ul ul ul {
position: absolute; left: 100%; top:50;
}

Demo

CSS并排放下“向下”菜单

3 个答案: