HTML + CSS Menu - ako urobiť vysunutie položky do prava?

14.03.17 14:14

Inga

Čau, vie mi niekto napísať ako mám nastaviť v CSS pripojenom pre HTML stránku
položky ktoré sa majú vysúvať do prava? Mám to spravené že je to drop-down a vysúva sa to dole, ale to ako to urobiť do prava neviem a ani žiadny tutorial na YouTube som nenašiel. Prikladám aj tie súbory, môžte mi to aj tam urobiť hneď

menu.zip (1.2 KB, 3 videní)

Ak potrebujete v otázke niečo upresniť, najskôr sa spýtajte na podrobnosti.
Koncept slúži na uloženie rozpracovanej odpovede, koncept sa zobrazuje len Vám, až kým ho nezverejníte.
Ak máte podobnú otázku, založte Novú otázku alebo Súvisiacu otázku.

❤ Buďte priateľskí ❤

Sme súčasťou jednej komunity, ktorá si chce vzájomne pomáhať, rozdieľnosť je vítaná ak neubližuje!

14.03.17 21:01

julo24

Snad ti to pomoze, ja mam nieco taketo. Ponuky sa vysuvaju doprava. Je to tusim tretia polozka zhora, ktora sa vysuva ,,cccc". Toto je kod css, subor s nazvom ,,rolovacie menu.css" - staci len ked si to poupravujes podla seba:

/* Kontextové CSS menu 0.5 */
/* Posledná úprava - 17.1.2017 */

body {behavior: url(csshover.htc); color: #000; background-color: #fff; font: 0.7em Arial, Verdana, lucida, sans-serif; margin: 50px;}

h1 {font-size: 200%;}
/* .tien { width: 200px; float: left; tien menu;} */
/* .tien { width: 200px; float: left; background-color: #fff;} */
.tien { width: 200px; float: left; background-color: #fff;}
.tien .menu { padding: 0; position: relative; left: -5px; top: -17px;}
/* .tien .menu { padding: 0; position: relative; left: -5px; umiestnenie podmenu;} */
/* .tien .menu { padding: 0; position: relative; left: -5px; top: -17px;} */

.obsah { margin: 0; padding: 0; background-color: #fff; border: solid 1px #9d9da1;}
.obsah ul { background: url(men.png) repeat-y top left transparent; list-style: none; padding: 2px; margin: 0; width: 100%;}
.obsah ul li { color: #aca899; padding: 0 0 1px 33px; margin:0;}
.obsah ul li a {padding: 1px 0; margin: 0;}
.obsah ul li#podmenu { background: url(sipka.png) no-repeat -1% 55% transparent;}
.obsah ul li#podmenu .tien { display: none;}
.obsah ul li#podmenu:hover {background-color: #f0f0f0;}
.obsah ul li#podmenu:hover .tien { float: left; display: block; position: absolute; left: 202px;}
.obsah ul li a { cursor: default; color: #000; width: 158px; display: block; text-decoration: none;}
.obsah ul li a:hover { background-color: #f0f0f0;}

A toto je naviazany html subor s nazvom index.htm :

<html>
<head>

<meta content="text/html; charset=windows-1250" http-equiv="Content-Type" />
<meta content="sk" http-equiv="content-language" />

<link type="text/css" href="rolovacie menu.css" media="screen,projection" rel="stylesheet" />

</head>
<body>

<div class="tien">
<div class="menu">
<div class="obsah">
<ul>
<li><a href="http://www.xxxxx.sk/xxxxx/xxxxx.htm">aaaa</a></li>

<li id="podmenu">
<a href="http://www.xxxxx.sk/xxxxx/xxxxx.htm">bbbb</a>
<div class="tien">
<div class="menu">
<div class="obsah">
<ul>
<li><a href="http://www.xxxxx.sk/xxxxx/reklama.htm">aaa</a></li>
<li><a href="http://www.xxxxx.sk/xxxxx/bannery.htm">bbby</a></li>
<li><a href="http://www.xxxxx.sk/xxxxx/reklama.htm">ccc</a></li>
<li><a href="http://www.xxxxx.sk/xxxxx/bannery.htm">ddd</a></li>
</ul>
</div>
</div>
</div>
</li>

<li id="podmenu">
<a href="http://www.xxxxx.sk/xxxxx/po.htm">cccc</a>
<div class="tien">
<div class="menu">
<div class="obsah">
<ul>
<li><a href="http://www.xxxxx.sk/xxxxx/reklama.htm">Predaj</a></li>
<li><a href="http://www.xxxxx.sk/xxxxx/bannery.htm">Služby</a></li>
<li><a href="http://www.xxxxx.sk/xxxxx/reklama.htm">Servis</a></li>
<li><a href="http://www.xxxxx.sk/xxxxx/bannery.htm">Hocičo</a></li>
</ul>
</div>
</div>
</div>
</li>

<li><a href="http://www.xxxxx.sk/kontakt/kontakt.htm">Kontakt</a></li>
<li><a href="http://www.xxxxx.sk/">O nás</a></li>
<li><a href="http://www.xxxxx.sk/">blablabla</a></li>
<li><a href="http://www.xxxxx.sk/">lalala</a></li>
<li><a href="http://www.xxxxx.sk/">Položka 8...</a></li>
<li><a href="http://www.xxxxx.sk/">Položka 9...</a></li>
<li><a href="http://www.xxxxx.sk/">Položka 10...</a></li>
</ul>
</div>
</div>
</div>

</body>
</html>