Menu poziome rozwijane CSS szerokość

pytanie zadane 27 lutego 2016 w HTML i CSS przez Kubala94 Początkujący (360 p.)
edycja 27 lutego 2016 przez Kubala94

Witam , mam takie menu poziome rozwijane w css zrobione ;

kod css

		body
		{
			background-color: #000000;
			color: white;
			font-family: 'Open Sans', sans-serif;
		}

		#container
		{
			width:1000px;
			margin-left: auto;
			margin-right: auto;
		}
 
		#logo
		{
			background-color: blue;
			color:white;
			font-size:46px;
		}
		
		
		
			
			.nav 
		 {
			list-style:none;
			margin: 50px 0;
			padding:0;
			margin-top:20px;
			font-family:arial;
			
			
			
		 }
		 
		 .nav li
		 {
			 float:left; 
		 }
		 
		 .nav li a
		 {
			display:block; 
			padding:10px 20px;
			text-decoration:none;
			background-color:#0A9FD1;
			color:white;
			position:relative;

		 }
		 
		 
		 .nav ul
		 {
			 list-style: none;
			 position: absolute;
			 padding:0;
			display: none;

		 }
		 
		 .nav ul li
		 {
			 float:none;
			
		 }
		 
		 .nav li a:hover,.nav li:hover>a
		 
		 {
			 background-color:white; 
			 color: black;
		 }
		 .nav li:hover>ul
		 {
			 display:block;
			 
		 }

chodzi mi o to , że jak zrobić żeby moje menu miało szerokość taką jak logo (dołączam zdjęcie)

rozumiecie o co chodzi , żeby menu było takie szerokie jak div logo , ale nie jak teraz jest ,

tylko bez wstawianie kolejnych linków link 7 to ma być ostatni a reszta to po prostu dalej menu ale już bez linków ;p nie wiem czy to dobrze wytłumaczyłem ma być wyrównane do lewej , próbowałem już coś z tym zrobić ale nic to nie dało.. , jestem beginnerem w css :) pewnie to jest proste ale nie mam pojęcia jak to zrobić, będę wdzięczny za pomoc.

1 odpowiedź

odpowiedź 27 lutego 2016 przez Czort Nałogowiec (32,500 p.)

Pokaż html, bo z samego css ciężko wywróżyć jak masz elementy zagnieżdżone.

komentarz 27 lutego 2016 przez Kubala94 Początkujący (360 p.)

Proszę :  będę wdzięczny za pomoc .

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
     <title>Test</title>
	 <meta name="destcription" content="Test">
     <meta name="keywords" content="test" />
	 <meta http-equiv="X-UA-Compatible" content="IE=edge,chorme=1"/>
	 
	 <link href="style.css" rel="stylesheet" type="text/css" />
	 
	 <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	 
	 
</head>

<body>
	
	<div id="container"> 
	
		
			<div id="logo"> 
			<center>Test</center>
			</div>
		
		
			<ul class="nav">

<li><a href="#"> Home</a></li>
<li><a href="#"> Link 2</a><ul>
		<li><a href="#">Podmenu 1</a></li>
		<li><a href="#">Podmenu 2</a></li>
		<li><a href="#">Podmenu 3</a></li>
		<li><a href="#">Podmenu 4</a></li>
		</ul></li>

		<li><a href="#"> Link 3</a></li>
		<li><a href="#"> Link 4</a></li>
		<li><a href="#"> Link 5</a></li>
		<li><a href="#"> Link 6</a></li>
		<li><a href="#"> Link 7</a></li>

</ul>
			
	</div>

</body>

</html>

komentarz 27 lutego 2016 przez Czort Nałogowiec (32,500 p.)

background-color: #0A9FD1;
width:1000px;
height:38px;

Dopisz do .nav{}

komentarz 27 lutego 2016 przez Kubala94 Początkujący (360 p.)

Działa dzięki :) , tylko zamiast height :38px; musiałem dać 40px; ale to drobnostka ;p Dzięki tylko mam jeszcze pytanko jak bym chciał to menu np. wyśrodkować teraz tzn. menu , linki menu wyśrodkować, szerokosc ta sama , wiecie o co chodzi , wiem że text-align:center; ale gdzie to wstawic jak dałem w .nav{} to nie działa

komentarz 27 lutego 2016 przez GaCeL Dyskutant (7,500 p.)

.nav { 
    margin-left: auto;
    margin-right: auto; 
}

komentarz 27 lutego 2016 przez Kubala94 Początkujący (360 p.)

dodałem, ale nie działa , dobra nie jest to konieczne , ale chcialem zobaczyc jak to bedzie wyglądać

komentarz 27 lutego 2016 przez Czort Nałogowiec (32,500 p.)

Tak wygląda wyśrodkowane:

https://jsfiddle.net/eb9cf744/

komentarz 27 lutego 2016 przez Kubala94 Początkujący (360 p.)

Dzięki , pomyśle na tym wyśrodkowaniem :) a jeszcze jedno ostatnie już pytanie ,bo chyba za dużo pytam ;p czy da się tak zrobić przy tym menu i jeśli ,tak to jak to zrobić ;) Chodzi mi o dłuższe odstępy między linkami to znaczy się linki od 1 do 7 maja być tak jak były ,a potem jeszcze 2 linki całkiem po prawej w tym jeden podświetlony cały czas , jak uzyskać takie coś jak tu:

tak , żeby działało z menu rozsuwanym , próbowałem <ul style="float:right;list-style-type:none;"> </ul> ale odmawia posłuszeństwa ..

komentarz 27 lutego 2016 przez Czort Nałogowiec (32,500 p.)

Nie używa się style inline. Po to masz plik css, żeby w nim stylować. Twój problem sprowadza się do nadania odpowiednim elementom float:left; i float:right; - którym to sam się domyśl i tak już za dużo gotowców dostałeś.