Как переместить несколько выпадающего меню на правую сторону в HTML?

Как переместить несколько раскрывающихся меню в правой части HTML?

Когда я удаляю поле margin-left, margin и padding до 0px из корневого тега ul, тогда все меню отображаются слева и размер выпадающего меню совпадает


Я хочу переместить все меню плюс выпадающее меню вправо. Я переместил меню вправо, используя margin-left, margin: 15px и добавив 15px в корневой тег ul, и оно работает, но размер выпадающего меню не совпадает, пожалуйста, посмотрите картинку.


[вывод этой страницы] [1]: https://i.stack.imgur.com/jLZnO.png


[ожидаемый результат] [2]: https://i.stack.imgur.com/wvOLY.png

 ul { margin: 15px; padding: 15px; list-style: none; margin-left: 50%; } ul li { float: left; width: 200px; height: 40px; background-color: blue; opacity: .8; line-height: 40px; text-align: center; font-size: 20px; } ul li a { text-decoration: none; color: white; display: block; } ul li a:hover { background-color: green; } ul li ul li { display: none; } ul li:hover ul li { display: block; } 
 {amp}lt;ul class="menu"{amp}gt; {amp}lt;li{amp}gt; {amp}lt;a{amp}gt;sport{amp}lt;/a{amp}gt; {amp}lt;ul{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#"{amp}gt;football{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#"{amp}gt;soccer{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#"{amp}gt;basketbal{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt; {amp}lt;a{amp}gt;more info{amp}lt;/a{amp}gt; {amp}lt;ul{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#"{amp}gt;#{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#"{amp}gt; #{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#"{amp}gt;#{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector