Html CSS Drop“；“向下”；并排菜单

我在html+css方面没有太多的经验，但是我有谷歌，所以很容易学习，但有时事情会很难。 我正在尝试做我自己的投资组合，其中首页只显示我的徽标和带有两种语言的下拉菜单。 它位于左下角，当鼠标悬停在显示器上方时，它会向上显示，但我想将显示器并排显示在右侧

• 葡萄牙人

• 英式

• 语言

但是我想要这样

• 语言-英语-葡萄牙语

html:

我真的很感谢你的帮助

多谢各位

更新：这是一个打印屏幕，上面显示了我的操作方式和我需要的方式！ 将CSS更改为

ul ul li{display: inline-block}

或

---

对于您提供的代码，我能做的唯一一件事就是修复HTML，它实际上并不正确

HTML:

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

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

试试这个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;
}

---

请创建JSFIDLE。调试起来会容易得多。net请向我们提供完整的图像URL，而不是image/*。png@Daan我不明白。你想要像这样的C:\wamp\www\h.toffanelo\image吗？SorryAh你把它放在本地服务器上，你应该试着把它上传到某个地方，并给我们上传图片的链接。事实上，我正在寻找一个地方来承载它。我有一个打印显示它是如何工作的，但由于我是新来这里我不允许张贴任何照片！你是说在哪里导航{float:none；position:relative；}？我做了，但没有工作。你也有一些多余的，我从你的帖子中删除了。你已经从html中删除了它们吗？它在JSFIDLE中工作，但是当我更改代码时，菜单会向下和向左移动。不知道为什么。

ul ul li{display: inline-block}

ul ul li{display: inline}

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

 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;
}